const path = require('path')
const EslintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");

// resolve: 用来拼接路径的函数

// 暴露配置对象
module.exports = {
  // 模式
  mode: 'production',

  // 入口
  entry: './src/main.js',

  // 出口
  output: {
    // __dirname：当前配置文件所在的目录绝对路径
    path: path.resolve(__dirname, 'build'), // 打包文件所在的根目录 必须是绝对路径
    filename: 'js/bundle.js', // 打包生成的js文件名(可以带目录)
    clean: true, // 打包时, 会先自动清空打包文件夹
  },



  // 配置 loader
  module: {
    rules: [
      // 配置 css 文件处理
      {
        test: /\.css$/, // 处理css文件
        use: [
          // 将style-loader换为MiniCssExtractPlugin.loader
          // 'style-loader', // js文件 => 页面的style标签
          MiniCssExtractPlugin.loader,
          'css-loader',  // css文件 => js文件
          'postcss-loader', // 添加在css-loader下面
        ]
      },

      // 样式: css文件 ==> js文件 ==> 页面中的style标签中
      // css-loader: 将css文件中的样式代码打包到js打包文件中
      // style-loader: 将js打包文件中的css代码插入到页面的<style>

      // 配置less 文件处理
      {
        test: /\.less$/,
        use: [
          // 'style-loader', // js文件 => 页面的style标签
          MiniCssExtractPlugin.loader,
          'css-loader',  // css文件 => js文件
          'postcss-loader', // 添加在css-loader下面
          'less-loader', // 将less文件 => css文件
        ]
      },
      // 配置babel的loader   ES6 => ES5
      {
        test: /\.js$/, // 处理js文件
        exclude: /(node_modules)/, // 不对node_modules下的js进行处理
        use: { // 使用指定loader
          loader: 'babel-loader',
          options: {
            // 指定babel的预设包
            // presets: ['@babel/preset-env'],

            // 修改 babel-loader 的配置
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',   // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 }  // 指定core-js的版本号为2
                }
              ]
            ],

            // 指定babel的插件
            plugins: []
          }
        }
      },
      // 处理图片
      {
        test: /\.(jpg|png|gif)$/,
        type: "asset",
        // 解析器
        parser: {
          // 指定进行图片base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          }
        },
        // 打包生成的文件
        generator: {
          // [name]: 图片原本的名称
          // [hash:8]: 图片内容的md5值, 保留前8位
          // [ext]: 图片的后缀名
          filename: 'images/[name]_[hash:8][ext]',
        },
      },
      // 配置 html 的 loader
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      }

    ]
  },
  // 插件
  plugins: [
    // esLint插件
    new EslintPlugin(),
    // 配置打包HTML的插件
    new HtmlWebpackPlugin({
      template: "./public/index.html",// 指定html模板文件。
      inject: "body",// 将打包生成的JS文件放置在body尾部
    }),

    // 单独生成css的插件
    new MiniCssExtractPlugin({
      filename: "css/[name]_[hash:8].css",
    }),
  ],

  // 优化配置
  optimization: {
    minimizer: [
      // 2. 在优化配置中指定插件来压缩CSS
      new CssMinimizerPlugin(),
      // 2. 在优化配置项中指定插件压缩JS
      new TerserPlugin()
    ],
  },


 


}